<?php
get_header(); ?>

<div class="intro">
  <div class="center-holder">
    <div class="center-frame">
      <div class="gallery-area">
        <!-- gallery -->
        <div class="gallery">
          <div class="gallery-holder">
            <div class="gallery-frame">
              <!-- prev button -->
              <a href="#" class="prev">prev</a>
              <!-- mask -->
              <div class="mask">
                <ul>
                  <!-- welcome banner -->
                  <?php
                  if (have_rows('large_slides_show', get_the_ID())) {
                    while (has_sub_field('large_slides_show')) {
                      $image = get_sub_field('slide_image');
                      ?>
                      <li>
                        <div style="background-color:<?php echo get_sub_field('slide_color'); ?>" class="slide">
                          <div class="slide-txt">
                            <div class="slide-content">
                              <h1 style="color:#ffffff"><?php echo get_sub_field('title'); ?></h1>
                              <p style="color:#ffffff"><?php echo get_sub_field('introduce') ?></p>
                              <a href="<?php echo site_url().get_sub_field('link') ?>"><img src="<?php echo get_template_directory_uri(); ?>/common/css/images/LearnMoreButton.png"></a>
                            </div>
                          </div>
                          <div class="visual-area">
                            <img title="<?php echo get_sub_field('title'); ?>" alt="<?php echo get_sub_field('title'); ?>" class="target-image" src="<?php echo $image['url']; ?>" style="width: 764.983px; top: -77.3355px; left: -60.2989px; position: absolute; overflow: hidden;">
                            <div style="background-color:<?php echo get_sub_field('slide_color'); ?>" class="banner-bar"> </div>	
                            <h2 style="font-size:38px"><?php echo get_sub_field('slide_title'); ?></h2>
                          </div>
                        </div>
                      </li>
                      <?php
                    }
                  }
                  ?>
                </ul>
              </div>
              <!-- next-button -->
              <a href="#" class="next">next</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="main">
  <div class="main-holder">
    <div class="boxes-section">
      <div class="content-boxes">
 
        <!-- content-box -->
        <?php
        if (have_rows('articles', get_the_ID())) {
          while (has_sub_field('articles')) {
            $image = get_sub_field('image');
            ?>
            <div class="content-box">
              <img title="<?php echo get_sub_field('title') ?>" alt="<?php echo get_sub_field('title') ?>" src="<?php echo $image['url']; ?>" style="padding-top: 40px;">
              <div class="box-txt">
                <h2 class="orange-txt" style="color: <?php echo get_sub_field('title_color'); ?>"><?php echo get_sub_field('title') ?></h2>
                <p><?php echo get_sub_field('introduce') ?></p>
                <a class="btn" href="<?php echo site_url().get_sub_field('link') ?>"><span>Learn More</span></a>
              </div>
            </div>
            <?php
          }
        }
        ?>

      </div>
    </div>

    <?php if (have_posts()) : ?>
      <?php
      while (have_posts()) : the_post();
        the_content();
      endwhile;
    endif;
    ?>

<?php get_footer(); ?>
